<template>
  <div class="content" style="padding-top:0px;margin-top:4%">
    <navbar></navbar>
    <section class="hero is-info">
      <div class="hero-body">
        <p class="title">关注的人</p>
        <p class="subtitle">关注列表</p>
      </div>
    </section>
    <div
      v-for="item in res_detail"
      v-bind:key="item"
      style="padding: 20px 15% 20px 15%"
    >
      <vs-alert border>
        <template #title>
          <div @click="zone(item.uid)">
            {{ item.username.String }}
          </div>
        </template>
        <div class="columns">
          <div class="column is-one-third">
            <b>声望：{{ item.honor.Int32 }}</b>
          </div>
          <div class="column is-one-third">
            <b>个性签名：{{ item.tail.String }}</b>
          </div>
          <div class="column is-one-third">
            <b-button @click="unsub(item.uid)" style="float: right"
              >取关</b-button
            >
          </div>
        </div>
      </vs-alert>
    </div>
  </div>
</template>
<script>
import navbar from "../components/common/navbar.vue";
export default {
  name: "upman",
  components: { navbar },
  data() {
    return {
      uid: "",
      res: [],
      res_detail: [],
    };
  },
  methods: {
    async zone(uid) {
      this.$router.push({
        path: "/zone",
        query: {
          uid: uid,
        },
      });
    },
    //unsub user
    async unsub(targetUid) {
      let resulted = await this.$http.delete("/go/sub/removeUid", {
        data: {
          targetUid: targetUid,
        },
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      console.log(resulted.data);
      if (resulted.data.status == 20000) {
        this.$vs.notification({
          position: "top-center",
          title: "取关成功",
        });
        this.res_detail = this.res_detail.filter(function (value, index, arr) {
          return value.uid != targetUid;
        });
      }
    },
  },
  async beforeCreate() {
    let res = await this.$http.get("/go/sub/mine", {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    // console.log(res);
    this.uid = res.data.data.uid;
    this.res = res.data.data.sublist;
    // console.log(this.res);
    // console.log(this.uid);
    if (this.res.length == "0") {
      this.$vs.notification({
        color: "#66CCFF",
        position: "top-center",
        title: "抱歉",
        text: "您似乎没有订阅用户",
      });
    }
    let res_detail = await this.$http.get("/go/sub/details/" + this.uid, {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    // console.log(res_detail);
    this.res_detail = res_detail.data.data;
    console.log(this.res_detail);
  },
};
</script>
<style scoped>
.content {
  margin-top: 70px;
  min-height: calc(100vh - 34px);
}
</style>
